﻿<style>
    td.details-control {
        background: url('/Assets/res/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.details-control {
        background: url('/Assets/res/details_close.png') no-repeat center center;
    }
</style>
<div class="row">
    <div class="col-xs-12">
        <!--表格区域定义开始-->
        <div class="table-header">
            该流程流经的步骤列表如下：
            <button class="btn btn-success" onclick="table.ajax.reload().draw(false)">
                <i class="icon-refresh bigger-120"></i>
                刷新
            </button>
        </div>
        <table id="dtSetps" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>当前活动</th>
                    <th>当前人员</th>
                    <th>目标活动</th>
                    <th>流转日期</th>
                    <th>备注</th>
                </tr>
            </thead>
        </table>
        <!--表格区域定义结束-->
    </div>
</div>
<script src="~/Assets/js/jquery.dataTables.min.js"></script>
<script src="~/Assets/js/jquery.dataTables.bootstrap.js"></script>
<script src="~/Assets/js/flexflow-tools.js"></script>
<script>
    var flowSetpTable;
    $(document).ready(function () {
        //初始化表格
        flowSetpTable = $('#dtSetps').DataTable({
            "ajax": {
                'url': "/FFEUserAPI/GetProcessSetps",
                'type': 'POST',
                'data': {
                    'procInsId' : '@Request["procInsId"]'
                }
            },
            "columns": [
                {
                    "data": "id",
                    "visible": false,
                },
                { "data": "fromActName" },
                { "data": "fromUserName" },
                { "data": "toActName" },
                { "data": "flowTime" },
                { "data": "tag" },
            ],
            "language": {
                "url": "/assets/res/DT_Language_zh_CN.txt"
            }
        });
        //绑定ToolTip
        flowSetpTable.on("draw.dt", function () {
            $('[data-rel=tooltip]').tooltip();
        })
        // Add event listener for opening and closing details
    });

</script>